@extends('Admin.layout.layout')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>服务订单</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="tabs-container">
                            <ul class="nav nav-tabs" id="navState">
                                <li data-id="">
                                    <a data-toggle="tab" aria-expanded="true">所有订单</a>
                                </li>
                                <li class="" data-id="1">
                                    <a data-toggle="tab" aria-expanded="true">待订单确认</a>
                                </li>
                                <li class="" data-id="2">
                                    <a data-toggle="tab" aria-expanded="true">待付款</a>
                                </li>
                                <li class="" data-id="3">
                                    <a data-toggle="tab" aria-expanded="true">待交付确认</a>
                                </li>
                                <li class="" data-id="41,42,5">
                                    <a data-toggle="tab" aria-expanded="true">待评价</a>
                                </li>
                                <li class="" data-id="6">
                                    <a data-toggle="tab" aria-expanded="true">完成</a>
                                </li>
                                <li class="" data-id="7">
                                    <a data-toggle="tab" aria-expanded="true">已取消</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        <div class="row">
                                            <form action="{{asset('/foradmin/service')}}" method="GET">
                                                {{csrf_field()}}
                                                <div class="col-sm-12">
                                                    <div class="input-group fl mr10">
                                                        <input name="keyword" type="text" placeholder="服务名称/订单编号/商家/客户" class="input-sm form-control" value="{{array_get($search_params,'keyword')}}">
                                                    </div>
                                                    <div class="input-group fl mr10">
                                                        <p class="form-control-static">下单时间：</p>
                                                    </div>
                                                    <div class="input-group fl mr10">
                                                        <input name="created_at[start]" placeholder="开始日期" class="input-sm form-control layer-date" id="start" value="{{array_get($search_params,'created_at.start')}}">
                                                    </div>
                                                    <div class="input-group fl mr10">
                                                        <input name="created_at[end]" placeholder="结束日期" class="input-sm form-control layer-date" id="end" value="{{array_get($search_params,'created_at.end')}}">
                                                    </div>
                                                    <button type="submit" class="btn btn-sm btn-primary fl">查询</button>
                                                </div>
                                            </form>
                                        </div>
                                        <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                                            <thead>
                                                <tr>
                                                    <th>订单编号</th>
                                                    <th class="center">服务名称</th>
                                                    <th class="center">客户</th>
                                                    <th class="center">费用类型</th>
                                                    <th class="center">金额</th>
                                                    <th class="center">状态</th>
                                                    <th class="center">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @if(empty($list))
                                                <tr class="no-records-found center"><td colspan="8">没有找到匹配的记录</td></tr>
                                            @else
                                                @foreach($list as $key=>$value)
                                                    <?php $count = count($value['order_products']) ?>

                                                @foreach($value['order_products'] as $k=>$v)
                                                @if($k==0)
                                                <tr>
                                                    <td style="border-right: 1px solid #e6e6e6;" rowspan="{{$count}}">{{$value['order_code']}}</td>
                                                    <td style="border-right: 1px solid #e6e6e6;" rowspan="{{$count}}">{{$value['order_qualification']['project_name']}}</td>
                                                    <td style="border-right: 1px solid #e6e6e6;" rowspan="{{$count}}">{{array_get($value,'user.name')}}</td>

                                                    <td style="border-right: 1px solid #e6e6e6;">{{array_get($v,'product_name')}}</td>

                                                    <td style="color:#ff7a00;border-right: 1px solid #e6e6e6;">¥{{$v['product_price']}}</td>
                                                    <td style="border-right: 1px solid #e6e6e6;" rowspan="{{$count}}">
                                                        {{--交易状态; 1:等待付款，2: 付款完成 3: 已发货 4:确认完成 5:已取消--}}
                                                        {{$value['order_status_name']}}
                                                        {{--@if($value['order_status'] = 1)--}}
                                                            {{--@if($value['order_qualification']['status']==1)--}}
                                                                {{--<div>待卖家确认</div>--}}
                                                            {{--@elseif($value['order_qualification']['status'] == 2)--}}
                                                                {{--<div>待订单确认</div>--}}
                                                            {{--@elseif($value['order_qualification']['status'] ==3)--}}
                                                                {{--<div>待付款</div>--}}
                                                            {{--@endif--}}

                                                        {{--@elseif($value['order_status'] == 2)--}}
                                                            {{--<div>待发货</div>--}}
                                                        {{--@elseif($value['order_status'] == 3)--}}
                                                            {{--<div>待确认收货</div>--}}
                                                        {{--@elseif($value['order_status'] == 5)--}}
                                                            {{--<div>待评价</div>--}}
                                                        {{--@elseif($value['order_status'] == 6)--}}
                                                            {{--<div>交易完成</div>--}}
                                                        {{--@elseif($value['order_status'] == 7)--}}
                                                            {{--<div>已取消</div>--}}
                                                        {{--@endif--}}
                                                        {{--@if($value['order_qualification']['is_deposit']==2)--}}
                                                            {{--@if($value['order_qualification']['status'] == 41)--}}
                                                                {{--<div>退保证金中</div>--}}
                                                            {{--@elseif($value['order_qualification']['status'] == 42)--}}
                                                                {{--<div>退保证金中(等待卖家确认)</div>--}}
                                                            {{--@endif--}}
                                                        {{--@endif--}}
                                                    </td>
                                                    {{--交易状态 1. 待卖家确认 2.待付款(签署合同付款)  3.待交付(盖章) 41. 待申请退保证金 42.确认退保证金 5.待评价 6.已完成 7.已取消--}}
                                                    <td rowspan={{$count}}>
                                                        <div class="btnbox">
                                                            <a class="btn-xs btn-primary check_order" data-id="{{$value['id']}}" data-toggle="modal" data-target="#myModal" data-name="{{$value['order_qualification']['project_name']}}" data-remark="{{$value['remark']}}" >查看备注</a>
                                                            {{--<a class="btn-xs btn-danger cancel_btn" data-id="1">取消</a>--}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                @endif
                                                @if($k>0)
                                                    <tr>
                                                        <td style="border-right: 1px solid #e6e6e6;">{{$v['product_name']}}</td>
                                                        <td style="color:#ff7a00;border-right: 1px solid #e6e6e6;">¥{{$v['product_price']}}</td>
                                                    </tr>
                                                @endif
                                                @endforeach
                                                @endforeach
                                            @endif
                                            </tbody>
                                        </table>
                                        <div class="row">
                                            @include('Admin.common.paginate')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    备注
                </h4>
            </div>
            <form class="form-horizontal m-t" id="signupForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">项目名称：</label>
                    <div class="col-sm-8">
                        <p class="form-control-static" id="project_name"></p>
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注信息：</label>
                    <div class="col-sm-8 align_left">
                        <p class="form-control-static" id="remark"></p>
                    </div>
                </div>
                {{--<div class="form-group">--}}
                    {{--<label class="col-sm-3 control-label">附件：</label>--}}
                    {{--<div class="col-sm-8">--}}
                        {{--<p class="form-control-static"><a target="_blank" href="">123523.doc</a></p>--}}
                    {{--</div>--}}
                {{--</div>--}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >关闭
                </button>
            </div>
            </form>
        </div>
    </div>
</div>
    <script src="{{asset('js/plugins/layer/laydate/laydate.js')}}"></script>
    <script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $.getUrlParam = function(name)
            {
             var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
             var r = window.location.search.substr(1).match(reg);
             if (r!=null) return unescape(r[2]); return null;
            }
            var status=$.getUrlParam('status');
            if(status == '' || !status){
                $('#navState li').eq(0).addClass('active');
            }else if(status == 1){
                $('#navState li').eq(1).addClass('active');
            }else if(status == 2){
                $('#navState li').eq(2).addClass('active');
            }else if(status == 3){
                $('#navState li').eq(3).addClass('active');
            }else if(status == '41,42,5'){
                $('#navState li').eq(4).addClass('active');
            }else if(status == 6){
                $('#navState li').eq(5).addClass('active');
            }else if(status == 7){
                $('#navState li').eq(6).addClass('active');
            }

            //日期范围限制
            var start = {
                elem: '#start',
                format: 'YYYY-MM-DD hh:mm:ss',
                min: laydate.now(), //设定最小日期为当前日期
                max: '2099-06-16 23:59:59', //最大日期
                istime: true,
                istoday: false,
                choose: function (datas) {
                    end.min = datas; //开始日选好后，重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };
            var end = {
                elem: '#end',
                format: 'YYYY-MM-DD hh:mm:ss',
                min: laydate.now(),
                max: '2099-06-16 23:59:59',
                istime: true,
                istoday: false,
                choose: function (datas) {
                    start.max = datas; //结束日选好后，重置开始日的最大日期
                }
            };
            laydate(start);
            laydate(end);

            $("#navState li").on('click', function (event) {
                event.preventDefault();
                $("#navState li").removeClass('active');
                $(this).addClass('active');
                var state = $(this).attr('data-id');
                location.href = 'service?status=' + state;
            });

            $('#myModal').on('show.bs.modal', function (e) {
                $('#project_name').html($(e.relatedTarget).data("name"));
                $('#remark').html($(e.relatedTarget).data("remark"));
            })

            //取消
            $('.cancel_btn').click(function(){
                var order_id = $(this).attr('data-id');
                layer.confirm('是否取消？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                }, function (index) {
                    $.ajax({
                        url: '',
                        type: 'PUT',
                        dataType: 'json',
                        data: {},
                        success: function (data) {
                            if (0 == data.code) {
                                layer.alert(data.message, {
                                    icon: 1
                                }, function () {
                                    location.reload();
                                });
                            } else {
                                layer.alert(data.message, {
                                    icon: 2
                                });
                            }
                        },
                    });
                }, function (index, layero) {
                    layer.close(index);
                });
            })

        });
    </script>
@endsection
